<template>
  <div class="search-hot">
    <h5>热门搜索</h5>
    <div class="word" v-if="hotword.length > 0">
      <span
        @click="$emit('changekeyword', word.first)"
        v-for="(word, index) in hotword"
        :key="index"
      >
        {{ word.first }}
      </span>
    </div>
    <music-loading v-else></music-loading>
    <!-- 历史记录 -->
    <ul class="searchHistory">
      <li v-for="(word, index) in wordHistory" :key="index" @click="$emit('changekeyword', word)">
        <i></i>
        <div>
          <p>{{ word }}</p>
          <i @click="del(index)"></i>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import MusicLoading from "./MusicLoading.vue";
export default {
  data() {
    return {
      hotword: [],
      wordHistory: [1, 2],
    };
  },
  created() {
    this.gethot();
    this.getHistory();
  },
  methods: {
    async gethot() {
      // 获取热门搜索信息
      let re = await this.axios.get("/search/hot");
      this.hotword = re.result.hots;
    },
    getHistory() {
      //获取搜索历史
      let re = localStorage.getItem("searchhistory");
      this.wordHistory = JSON.parse(re);
      console.log(re);
    },
    del(a) {
      this.wordHistory.splice(a, 1);
      localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
    }
  },
  components: {
    MusicLoading,
  },
};
</script>

<style lang="less" scoped>
.search-hot {
  padding: 0 8px;
  h5 {
    font-size: 12px;
    color: #666;
  }
  .word {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0;
    span {
      padding: 7px 10px;
      margin: 8px 8px 0px 0px;
      border: 1px solid #dad9d9;
      border-radius: 14px;
      font-size: 14px;
      color: #444;
    }
  }
  ul {
    padding-top: 10px;
    padding-bottom: 70px;
    li {
      display: flex;
      align-items: center;
      // height: 45px;
      i {
        display: block;
        width: 15px;
        height: 15px;
        background-image: url();
      }
      div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #dad9d9;
        margin-left: 8px;
        flex: 1;
        p {
          flex: 1;
          font: 14px/1.5 Helvetica, sans-serif, STHeiTi;
          color: #333;
          outline: 0;
          line-height: 45px;
        }
        i {
          width: 12px;
          height: 12px;
          background-image: url();
        }
      }
    }
  }
}
</style>